<!-- INCLUDE overall_header.html -->

	<a name="maincontent"></a>

	<h1>Ajout d'un dossier 3/4</h1>
	
	<p>Cr&eacute;ez la vignette pour ce dossier. Dans un premier temps choisissez une image, puis choisissez la zone.</p>

	<fieldset>
		<legend>Choissez l'image</legend>

		<div style="background-color : #FFF; border : 1px solid #ccc; width : 100%">
			<div style="width : 100px; float : left;">
				<ul>
					<li><a href="#" onclick="javascript:display('upload');">Upload</a></li>
					<li><a href="#" onclick="javascript:display('galeries');">Mes galeries</a></li>
					<li><a href="#" onclick="javascript:display('dossier');">Images du dossier</a></li>
				</ul>
			</div>
			<div style="margin-left : 110px;">
				<div id="selector">
				
				</div>
				<div id="imageToCrop" style="display:none; ">
					
					<!-- This is the form that our event handler fills -->
					<form action="{LINK}" method="post" onsubmit="return checkCoords();">
						<input type="hidden" id="x" name="x" />
						<input type="hidden" id="y" name="y" />
						<input type="hidden" id="w" name="w" />
						<input type="hidden" id="h" name="h" />
						<input type="hidden" id="fileURL" name="fileURL" />
						<input type="hidden" id="dossier_id" name="dossier_id" value="{DOSSIER_ID}" />
						<input type="submit" value="Crop Image" />
					</form>
				</div>	
			</div>
		</div>
	</fieldset>

	<script src="../js/lib/jcrop/jquery.Jcrop.js"></script>
	<link rel="stylesheet" href="jquery.Jcrop.css" type="text/css" />
	<script language="Javascript">
			function display(arg)
			{
				switch(arg)
				{
					case 'upload' :
						$.ajax({
							  url: "style/dossiers/ajout4_upload.html",
							  success: function( data ) {
								    $("#selector").html(data)
								  }
							});
						break;
					case 'galeries' :
						alert('ajout4_galeries.html');
						break;
					case 'dossier' :
						alert('ajout4_dossier.html');
						break;
				}
			}

			function updateCoords(c)
			{
				$('#x').val(c.x);
				$('#y').val(c.y);
				$('#w').val(c.w);
				$('#h').val(c.h);
			};

			function checkCoords()
			{
				if (parseInt($('#w').val())) return true;
				alert('Please select a crop region then press submit.');
				return false;
			};

		</script>

<!-- INCLUDE overall_footer.html -->